<template>
  <div class="active">
    <el-form ref="formRef" :model="form" label-width="250px">
      <el-form-item label="项目评审开始时间">
        <el-date-picker v-model="projectInfo.auditTime" type="datetime" placeholder="选择日期时间" style="width: 500px" disabled />
      </el-form-item>
      <el-form-item label="主持人评审签到时间">
        <el-date-picker v-model="form.startCheckTime" type="datetime" placeholder="选择先签到" style="width: 500px" disabled />
        <span @click="StartSingin('')" class="link">主持人签到签名</span>
      </el-form-item>

      <el-form-item label="主持人评审签到签名">
        <div class="tablet">
          <el-image v-if="form.startCheck" :src="baseURL + form.startCheck">
            <template #error>
              <div class="image-slot"></div>
            </template>
          </el-image>
        </div>
      </el-form-item>

      <el-form-item label="选择辅助主持人1：">
        <el-input v-model="form.remarkOne.name" style="width: 500px" disabled />
        <span @click="selectJudge('remarkOne')" class="link">选主持人</span>
      </el-form-item>
      <el-form-item label="辅助主持人1评审签到签名">
        <div class="tablet">
          <el-image v-if="form.remarkOne.startCheck" :src="baseURL + form.remarkOne.startCheck">
            <template #error>
              <div class="image-slot"></div>
            </template>
          </el-image>
        </div>
        <span @click="StartSingin('remarkOne')" class="link">辅助主持人1签到签名</span>
      </el-form-item>
      <el-form-item label="选择辅助主持人2：">
        <el-input v-model="form.remarkTwo.name" style="width: 500px" disabled />
        <span @click="selectJudge('remarkTwo')" class="link">选主持人</span>
      </el-form-item>
      <el-form-item label="辅助主持人2评审签到签名">
        <div class="tablet">
          <el-image v-if="form.remarkTwo.startCheck" :src="baseURL + form.remarkTwo.startCheck">
            <template #error>
              <div class="image-slot"></div>
            </template>
          </el-image>
        </div>
        <span @click="StartSingin('remarkTwo')" class="link">辅助主持人2签到签名</span>
      </el-form-item>
    </el-form>

    <sxb ref="Tablet" @Return="Return" style="display: none" />
    <!-- Element Plus 弹窗组件 -->
    <el-dialog title="签名" v-model="dialogVisible" width="600px">
      <sxb1 ref="tablet" @Return="handleReturn" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="clearCanvas">清空</el-button>
          <el-button type="primary" @click="saveAndClose">保存并关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="endbutton">
      <el-button type="primary" @click="nextStep">下一步</el-button>
    </div>
    <el-dialog :title="`选${title}`" v-model="modelhideOne">
      <el-form ref="formRef" :model="form" label-width="160px">
        <el-row :gutter="20">
          <el-col v-if="judgeList.length > 0" :span="6" v-for="(option, index) in judgeList" :key="index">
            <el-radio v-model="selectedoption" :label="option">{{ option.name }}</el-radio>
          </el-col>
          <el-col v-else style="text-align: center">暂无{{ title }}</el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="modelhideOne = false">取消</el-button>
          <el-button type="primary" @click="confirmSelection">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  vieAudit,
  vieAuditexecTask,
  queryJudge,
  delJudge,
  putJudge,
  projectInfoAndJudge,
  queryTaskId,
  vieAuditSign,
  selectMc,
} from "@/api/examine.js";
import { judgeProjectInfo } from "@/api/project.js";
import { getDictList, getDict, nowTime } from "@/utils/common.js";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import sxb from "@/components/sxb.vue";

const dialogVisible = ref(false);
const route = useRoute();
const router = useRouter();
const Tablet = ref(null);
const tablet = ref(null);
const selectedOption = ref({ id: "", value: "", label: "" });
const selectedoption = ref("");
const baseURL = import.meta.env.VITE_APP_BASE_API;
const title = ref("");
const modelhideOne = ref(false);
const projectInfo = ref({});
const showModal = ref(false);

const form = ref({
  projectStartTime: "",
  hostSigninTime: "",
  hostSignature: "",
  remarkOne: {}, //辅助主持人1
  remarkTwo: {}, //辅助主持人2
  fileDecryptInfo: "",
  qualificationReviewInfo: "",
  priceReviewInfo: "",
  businessReviewInfo: "",
  technicalReviewInfo: "",
  resultConfirmationInfo: "",
});
const id = computed(() => route.query.id);
const judgeList = ref([]);
const juryList = ref([]);
const custodianList = ref([]);
const mainId = ref("");
const confirmSelection = () => {
  modelhideOne.value = false;
  if (selectedoption.value.id && form.value[selectedOption.value] && form.value[selectedOption.value].id) {
    for (let i = 0; i < projectInfo.value.judgeList.length; i++) {
      if (projectInfo.value.judgeList[i].userId == selectedoption.value.id) {
        ElMessage.error("不能重复选择");
        getInfo();
        return;
      }
    }
    putJudge({
      id: form.value[selectedOption.value].id,
      userId: selectedoption.value.id,
    }).then((res) => {
      if (res.code == "200") {
        getInfo();
      }
    });
  } else if (selectedoption.value.id) {
    for (let i = 0; i < projectInfo.value.judgeList.length; i++) {
      if (projectInfo.value.judgeList[i].userId == selectedoption.value.id) {
        selectedoption.value = {};
        ElMessage.error("不能重复选择");
        return;
      }
    }
    applySupplier(selectedOption.value, "judge_compere");
  } else if (!selectedoption.value.id) {
    delJudge({ id: form.value[selectedOption.value].id }).then((res) => {
      if (res.code == "200") {
        getInfo();
      }
    });
  }
};

const userInfo = computed(() => JSON.parse(localStorage.getItem("judgeInfo")));

const Return = (item) => {
  const params = {
    projectId: id.value,
    projectCode: projectInfo.value.oaCode,
    projectJudgeId: SinginId.value,
    signStr: item,
    type: "sign_start",
  };
  vieAuditSign(params).then((res) => {
    if (res.code == "200") {
      form.value.startCheck = res.data;
      getInfo();
    }
  });
};
const signature = ref("");
const handleReturn = (data) => {
  signature.value = data;
};
const clearCanvas = () => {
  tablet.value.clearSign();
};
const saveAndClose = () => {
  Return(signature.value);
};
const SinginId = ref("");
const StartSingin = (item) => {
  switch (item) {
    case "":
      SinginId.value = form.value.id;
      Tablet.value.beginSign();
      break;
    case "remarkOne":
      if (form.value.remarkOne.id) {
        SinginId.value = form.value.remarkOne.id;
        Tablet.value.beginSign();
        // dialogVisible.value = true
      } else {
        ElMessage.error("请先选择辅助主持人1");
      }
      break;
    case "remarkTwo":
      if (form.value.remarkTwo.id) {
        SinginId.value = form.value.remarkTwo.id;
        Tablet.value.beginSign();
      } else {
        ElMessage.error("请先选择辅助主持人2");
      }
      break;
    default:
      break;
  }
};

const selectJudge = (key) => {
  selectedOption.value = key;
  judgeList.value = juryList.value;
  title.value = "主持人";

  modelhideOne.value = true;
};

const applySupplier = (key, type) => {
  const params = {
    projectId: id.value,
    userId: selectedoption.value.id,
    type: type,
  };
  vieAudit(params).then((res) => {
    if (res.code == "200") {
      getInfo();
    }
  });
};
const nextStep = () => {
  const params = { projectId: id.value };
  vieAuditexecTask(params).then((res) => {
    if (res.code) {
      window.location.reload();
    } else {
      window.location.reload();
    }
  });
};
const getInfo = () => {
  juryList.value = "";
  mainId.value = "";
  selectedoption.value = {};
  form.value = {
    remarkOne: {},
    remarkTwo: {},
  };
  queryJudge({ type: "judge_compere" }).then((res) => {
    if (res.code == "200") {
      juryList.value = res.data;
    }
  });
  selectMc(id.value).then((res) => {
    if (res.code == "200") {
      mainId.value = res.data;
    }
  });
  projectInfoAndJudge({ projectId: id.value }).then((res) => {
    if (res.code == "200") {
      form.value = {
        remarkOne: {},
        remarkTwo: {},
      };
      projectInfo.value = {};
      projectInfo.value = res.data;
      let length = 0;
      for (let i = 0; i < res.data.judgeList.length; i++) {
        if (!form.value.id && res.data.judgeList[i].userId == mainId.value) {
          form.value.id = res.data.judgeList[i].id;
          form.value.startCheckTime = res.data.judgeList[i].startCheckTime;
          form.value.startCheck = res.data.judgeList[i].startCheck;
        } else if (res.data.judgeList[i].type == "judge_compere") {
          switch (length) {
            case 0:
              form.value.remarkOne = res.data.judgeList[i];
              break;
            default:
              form.value.remarkTwo = res.data.judgeList[i];
              break;
          }
          length++;
        }
      }
    }
  });
};
const Previous = ref("");
onMounted(() => {
  getInfo();
  queryTaskId({ projectId: id.value }).then((res) => {
    Previous.value = res.data;
  });
});
</script>
<style scoped lang="scss">
@use "./judge";
:deep(.el-form-item__content) {
  display: flex;
  align-items: start;
}
</style>
